<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>天天生鲜-注册</title>
 <link rel="shortcut icon" href="images/logo.png">
 <link rel="stylesheet" href="css/reset.css">
 <link rel="stylesheet" href="css/reg.css">
 <link rel="stylesheet" href="css/unlock.css">
 <link rel="stylesheet" href="css/foot.css">
 <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
 <script src="js/unlock.js"></script>

</head>

<body>
<div id="register">
	<!-- 注册布局 -->
	<div class="register_con">
		<div class="l_con fl">
        	 <a href="#" class="reg_logo fr"><img src="images/logo.png"></a>
        	 <div class="reg_slogan fr">足不出户 · 新鲜每一天</div>
       		 <div class="reg_banner fr"></div>
        </div>

		<div class="r_con fr">
        	<div class="reg_title clearfix">
            	<h1 class="fl">用户注册</h1>
            	<a href="login.html" class="fr">登录</a>
            </div>
        	<div class="reg_form clearfix">
             	<form>
                    <ul>
                        <li>
                            <label for="nickname">用户名:</label>
                            <input type="text" id="nickname" name="nickname" v-model="nickName" placeholder="请输入您的用户名" required >
                            <span class="error_tip">提示信息</span>
                        </li>
                        <li>
                            <label for="pwd">密码:</label>
                            <input type="password" id="pwd" name="pwd" v-model="pwd" placeholder="请输入3~15位字母、数字还可包含特殊字符">
                            <span class="error_tip">提示信息</span>
                        </li>
                        <li>
                            <label for="cpwd">确认密码:</label>
                            <input type="password" id="cpwd" name="cpwd" placeholder="请输入确认密码">
                            <span class="error_tip">提示信息</span>
                        </li>
                        <li>
                            <label for="email">邮箱:</label>
                            <input type="text" id="email" name="email" v-model="email" placeholder="请输入有效的邮箱地址">
                            <input type="button" id="getCode" name="" value="获取验证码" >
                            <span style="float: left" class="error_tip">提示信息</span>
                        </li>
                        <li>
                            <label for="yzm">验证码:</label>
                            <input type="text" id="yzm" name="yzm" v-model="yzm" placeholder="请输入验证码">
                            <span class="error_tip">提示信息</span>
                        </li>
                        <li>
                            <label for="tel">电话号码:</label>
                            <input type="text" id="tel" name="tel" v-model="tel" placeholder="请输入以1开头的11位有效电话号码">

                            <span class="error_tip yzm_tip" >提示信息</span>
                        </li>
                        <li  class="row">
                        	<!-- 滑块验证-->
                            <div class="bar"></div>
                        </li>
                        <li class="agreement">
                            <input type="checkbox" id="allow" name="allow" checked>
                            <label for="allow">同意<a href="#">"天天生鲜用户使用协议"</a></label>
                            <span class="error_tip2">提示信息2</span>
                        </li>
                         <li>
                            <input type="button" id="reg" name="" @Click="register()" value="注 册">
<!--                             <input type="button" id="reg" name="" onClick="checkRegister()" value="注 册">-->

                             <span id="errmsg">提示信息3</span>
                        </li>
                    </ul>
                </form>
        	</div>
        </div>
	</div>
</div>
    <!-- 版权所有 -->
    <div class="footer">
    	<div class="foot_link">
        	<a href="#">关于我们</a> <span> | </span>
            <a href="#">联系我们</a> <span> | </span>
            <a href="#">招聘广告</a> <span> | </span>
            <a href="#">友情链接</a>
        </div>
    	<p>CopyRight &copy; 2019 衡阳市源辰信息科技有限公司 All Rights Reserverd</p>
        <p>电话：0734-8355998 湘ICP备16015987号</p>
    </div>

<!-- 引入Vue.js和自定义JS文件 -->
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/qs.js"></script>
<!--<script src="js/register.js"></script>-->


<script>
    // Vue实例中定义方法，应该改为methods
    let app = new Vue({
        el:"#register",
        data:{
            nickName: "tt",
            pwd : "123",
            tel : "15889369686",
            email : "2876271031@qq.com",
            // regDate : getTime()
            yzm : ""
        },
        methods:{ // 修改为methods
            register:function () {
                if((flag1===1&&flag2===1&&flag3===1&&flag4===1&&flag5===1&&flag6===1)){
                    if(yzm.value===this.yzm){
                        axios.post("http://localhost:20001/freshgood-security/security/freshgood/register.action",
                            qs.stringify({
                                op : 'register',
                                username: this.nickName,
                                pwd : this.pwd,
                                tel : this.tel,
                                QQ : this.email,
                                // regDate : getTime()
                                // yzm : this.yzm
                            })).then(rs =>{
                            if(rs.data.code===1){
                                alert("注册成功！");
                                location.href="login.html";
                            }else{
                                alert("注册失败！");
                            }
                        });
                    }else {
                        alert("验证码错误！");
                    }
                }else{
                    alert("请将信息填写完整！");
                }
            }
        }
    });
    const data = app.$data;
    // JavaScript Document
    let flag1=0;
    let flag2=0;
    let flag3=0;
    let flag4=0;
    let flag5=0;
    let flag6=0;
    //获取元素
    var  $nickname = $("#nickname");
    //输出到控制台
    // console.log($nickname);
    function lock(){
        $("#reg").attr("disabled","disabled");
        $("#reg").css("background","#a2a3aa");
    }
    function unlock(){
        $("#reg").removeAttr("disabled");
        $("#reg").css("background","#47aa34");
    }
    //用户名验证
    //失去焦点事件
    $("#nickname").blur (function(){
        //获取用户输入的用户名
        var nickname = $("#nickname").val();
        // console.log(nickname);
        //判断用户名的格式
        if(nickname == '' ){
            // console.log("用户不能为空");
            //给当前对象的下一个标签设值
            $(this).next().html("用户不能为空");
            //未设值前该标签是隐藏的  此时就必须显示来
            $(this).next().show();
            flag1=0;
        }
        //正则表达式
        //创建一个规则
        var reg = /^\w{2,15}$/;
        //判断
        /*
        var flag = reg.test(nickname);
        console.log(flag);
        */
        if( !reg.test(nickname)){
            //给当前对象的下一个标签设值
            $(this).next().html("用户名必须是2-15位的英文或数字");
            //未设值前该标签是隐藏的  此时就必须显示来
            $(this).next().show();
            flag1=0;
        }else{
            flag1=1;
        }
    });

    //聚焦事件
    $("#nickname").focus(function(){
        //隐藏
        $(this).next().hide();
    })

    //验证码验证
    //失焦事件
    $("#yzm").blur(function(){
        check_yzm();
    });

    //聚焦事件
    $("#yzm").focus(function(){
        $(this).next().hide();
    });

    function check_yzm(){
        //获取密码
        var yzm = $("#yzm").val();
        //判断
        if(yzm === ''){
            $("#yzm").next().html("验证码不能为空");
            $("#yzm").next().show();
            flag5=0;
        }else{
            flag5=1;
        }
    }
    //密码验证
    //失焦事件
    $("#pwd").blur(function(){
        check_pwd();
    });

    //聚焦事件
    $("#pwd").focus(function(){
        $(this).next().hide();
    });

    function check_pwd(){
        //获取密码
        var pwd = $("#pwd").val();
        //规则
        var reg = /^[\w@!#$%^&*~]{3,15}$/;
        //判断
        if(!reg.test(pwd)){
            $("#pwd").next().html("密码不符合规范");
            $("#pwd").next().show();
            flag2=0;
        }else{
            flag2=1;
        }
    }

    //确认密码验证
    //失焦事件
    $("#cpwd").blur(function(){
        check_cpwd();
    });

    //聚焦事件
    $("#cpwd").focus(function(){
        $(this).next().hide();
    });

    function check_cpwd(){
        //获取原密码
        var pwd = $("#pwd").val();
        //获取再次输入的密码
        var cpwd = $("#cpwd").val();

        //判断
        if(cpwd == ''){
            $("#cpwd").next().html("确认密码不能为空");
            $("#cpwd").next().show();
            flag3=0;
        }
        if(cpwd != pwd){
            $("#cpwd").next().html("两次输入的密码不一致");
            $("#cpwd").next().show();
            flag3=0;
        }else{
            flag3=1;
        }
    }

    //手机号码验证
    //失焦事件
    $("#tel").blur(function(){
        check_tel();
    });

    //聚焦事件
    $("#tel").focus(function(){
        $("#tel").next().hide();
    });

    //邮箱验证
    //失焦事件
    $("#email").blur(function(){
        check_email();
    });

    //聚焦事件
    $("#email").focus(function(){
        $("#email").next().next().hide();
    });

    function check_email() {
        //获取邮箱号码
        var email = $("#email").val();
        //规则
        var reg = /^[1-9][0-9]{4,10}(@qq.com)$/
        if( !reg.test(email)){
            $("#email").next().next().html("邮箱格式错误");
            $("#email").next().next().show();
            flag4=0;
            return false;
        }else{
            flag4=1;
            return true;
        }

    }
    function check_tel(){
        //获取电话号码
        var tel = $("#tel").val();
        //规则
        var reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;

        if( !reg.test(tel)){
            $("#tel").next().html("手机号码格式错误");
            $("#tel").next().show();
            flag6=0;
        }else{
            flag6=1;
        }
    }

    //获取验证码+点击后禁用15s
    $("#getCode").click(function(){
        let seconds = 15;
        var button = document.getElementById("getCode");
        button.disabled = true; // 禁用按钮

        var countdownInterval = setInterval(function() {
            seconds--;
            button.value = "请等待 " + seconds + "s"; // 在按钮上显示倒计时
            if (seconds <= 0) {
                clearInterval(countdownInterval);
                button.value = "获取验证码";
                button.disabled = false; // 启用按钮
            }
        }, 1000);
        var email = $("#email").val();
        //非空判断
        if(check_email()){
            console.log("发送验证码请求")
            //请求方式  地址  参数  回调函数
            axios({
                url: "http://localhost:20001/freshgood-security/security/freshgood/emailCode.action",
                method: "post",
                params: {QQ:data.email}
            }).then(rs =>{
                this.yzm=rs.data.yzm;
            })
        }else{
            alert("请填写好正确格式的qq邮箱！");
        }

    })


    //协议
    $("#allow").click(function(){
        //判断checkbox是否被选中
        if(!$(this).is(":checked")){
            $(this).next().next().html("您必须同意公司的协议");
            $(this).next().next().show();
            //给注册按钮设置禁用属性
            lock();
        }else{
            $(this).next().next().html("");
            $(this).next().next().hide();
            //移除注册按钮的禁用属性
            unlock();
        }
    })

    //注册
    // function checkRegister(){
    //     console.log("1"+flag1);
    //     console.log("2"+flag2);
    //     console.log("3"+flag3);
    //     console.log("4"+flag4);
    //     console.log("6"+flag6);
    //
    //     // 定义Promise对象
    //     let postPromise = new Promise((resolve, reject) => {
    //         axios.post("member",
    //             qs.stringify({
    //                 op : 'register',
    //                 nickName: this.nickName,
    //                 pwd : this.pwd,
    //                 tel : this.tel,
    //                 email : this.email,
    //                 regDate : getTime()
    //                 // yzm : this.yzm
    //             })
    //         ).then(rs =>{
    //             resolve(rs.data); // 将rs.data传递到Promise中，使用resolve方法返回数据
    //         }).catch(err => {
    //             reject(err); // 使用reject方法处理错误信息
    //         });
    //     });
    //
    //     postPromise.then(function (rs) { // 使用.then方法处理Promise返回结果
    //         if(rs === 1){
    //             alert("注册成功！");
    //             location.href="login.html";
    //         }else if(rs === 2){
    //             alert("验证码错误！");
    //         }else if(rs === 0){
    //             alert("注册失败！");
    //         }
    //     }).catch(err => {
    //         console.error(err); // 使用.catch方法处理Promise返回失败时的情况
    //     });
    //
    //     // 省略部分代码
    // }
    function getTime() {
        // 创建一个Date对象，并设置时间为2019-07-29 21:00:21
        var date = new Date();

// 获取年、月、日、小时、分钟和秒数
        var year = date.getFullYear();
        var month = ('0' + (date.getMonth() + 1)).slice(-2);
        var day = ('0' + date.getDate()).slice(-2);
        var hour = ('0' + date.getHours()).slice(-2);
        var minute = ('0' + date.getMinutes()).slice(-2);
        var second = ('0' + date.getSeconds()).slice(-2);

// 拼接日期时间字符串
        var dateTime = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
        return dateTime;
        // console.log(dateTime); // 输出：2019-07-29 21:00:21
    }



    $('.bar').slideToUnlock({});
</script>
</body>
</html>
